<template>
  <div>
    <MyNav></MyNav>
    <MyBanner></MyBanner>
    <list></list>
    <Seckill></Seckill>
    <MyWaterfall :x="arr"></MyWaterfall>
    <MyFooter></MyFooter>
    <HomeUnder></HomeUnder>
  </div>
</template>

<script>
import Seckill from "@/components/JH/homepage/Seckill.vue";
import MyBanner from "./homepage/MyBanner.vue";
import MyFooter from "@/components/JH/homepage/MyFooter.vue";
import MyNav from "@/components/JH/homepage/MyNav.vue";
import MyWaterfall from "@/components/JH/homepage/MyWaterfall.vue";
import list from "@/components/JH/homepage/list.vue";
import HomeUnder from "@/components/JH/homepage/HomeUnder.vue";

export default {
  components: {
    Seckill,
    MyBanner,
    MyFooter,
    MyNav,
    MyWaterfall,
    list,
    HomeUnder,
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll, true);
  },
  data() {
    return {
      arr: [],
      count: 1,
    };
  },
  methods: {
    handleScroll() {
      // console.log(this.$count[1]);
      // 页面滚动距顶部距离
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      //变量windowHeight是可视区的高度
      var windowHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
      //变量scrollHeight是滚动条的总高度
      var scrollHeight =
        document.documentElement.scrollHeight || document.body.scrollHeight;

      if (
        scrollHeight - (scrollTop + windowHeight) <= 20 &&
        // scrollTop + windowHeight >= scrollHeight - 1000 &&
        this.arr.length <= 84
      ) {
        this.$http({
            url: "api/pro/recommendlist", //页面加载发请求
            methed: "get",
            params: {
              count: this.count,
              limitNum: 12,
            },
          }).then((res) => {
            this.arr = this.arr.concat(res.data.data);
            this.count++;
          }); //添加你想要的事件
      }
    },
  },
};
</script>

<style>
::-webkit-scrollbar {
  width: 0 !important;
}
::-webkit-scrollbar {
  width: 0 !important;
  height: 0;
}
</style>